<template>
  <div class="login-container">
    <el-form ref="loginForm" class="login-form" label-position="left" :model="loginForm">
      <!--系统名称-->
      <div class="title-container">
        <h3 class="title">
          {{ $t('Login.systemName') }}
        </h3>
        <LangSet class="set-language" />
      </div>
      <!--登录名-->
      <el-form-item prop="loginName">
        <el-input
          ref="loginName"
          v-model.trim="loginForm.loginName"
          :placeholder="$t('Login.loginNamePlaceholder')"
          tabindex="1"
          type="text"
          @keyup.enter.native.prevent="nextLine"
        />
      </el-form-item>
      <!--登录密码-->
      <el-form-item prop="password">
        <el-input
          ref="password"
          v-model="loginForm.password"
          :placeholder="$t('Login.passwordPlaceholder')"
          show-password
          tabindex="2"
          type="password"
          @keyup.enter.native="handleLogin"
        />
      </el-form-item>
      <el-button
        :loading="isRequesting"
        style="width:100%;margin-bottom:30px;"
        tabindex="3"
        type="primary"
        @click.native.prevent="handleLogin"
      >
        {{ $t('Login.logIn') }}
      </el-button>
    </el-form>

    <!--编辑对话框-->
    <BaseDialog
      v-if="editDialogVisible"
      :title="$t('Login.changePwd')"
      :visible.sync="editDialogVisible"
      width="35%"
    >
      <LoginPwdEdit
        :sessionId="sessionId"
        @cancel="editDialogVisible = false"
        @save="afterEditSave"
      />
    </BaseDialog>
  </div>
</template>

<script>
import LangSet from '../../lang/LangSet'
import { setAuthToken } from '../../utils/browser'
import { userLogin } from '../../api/sys/user'
import { HOME_PATH } from '../../const/route-path'
import LoginPwdEdit from './components/LoginPwdEdit'

export default {
  name: 'Login',
  components: { LangSet, LoginPwdEdit },
  data() {
    return {
      // 正在查询
      isRequesting: false,
      loginForm: {
        loginName: '',
        password: '',
        isPageVisit: true
      },
      redirect: undefined,
      otherQuery: {},
      sessionId: '',
      editDialogVisible: false
    }
  },
  watch: {
    // 监听路由变化
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.pageInit()
  },
  methods: {
    pageInit() {
      this.focusForm()
    },
    // 回车换行
    nextLine() {
      this.$refs.password.focus()
    },
    // form表单获取焦点
    focusForm() {
      if (this.loginForm.loginName === '') {
        this.$refs.loginName.focus()
      } else if (this.loginForm.password === '') {
        this.$refs.password.focus()
      }
    },
    // 处理登录
    async handleLogin() {
      try {
        this.isRequesting = true
        const response = await userLogin(this.loginForm, { msgError: true })
        this.sessionId = response.data.sessionId
        const modifyTimes = response.data.modifyTimes
        if (!modifyTimes) {
          this.isRequesting = false
          return (this.editDialogVisible = true)
        }
        // 设置浏览器storage或者cookies
        setAuthToken(this.sessionId)
        this.$router
          .replace({ path: this.redirect || HOME_PATH, query: this.otherQuery || {} })
          .catch(err => {
            console.log(err)
          })
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    // redirect除外，获取其他url参数
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    // 修改保存之后
    afterEditSave() {
      this.editDialogVisible = false
      this.loginForm.password = ''
    }
  }
}
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$light_gray: #eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 500px;
    max-width: 100%;
    padding: 10% 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  .title-container {
    position: relative;
    height: 70px;
    .title {
      font-size: 26px;
      color: $light_gray;
      text-align: center;
      font-weight: bold;
    }
    .set-language {
      color: #fff;
      position: absolute;
      top: 15px;
      font-size: 15px;
      right: 0;
    }
  }
}
</style>
